<template>
  <h1>用户登录</h1>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="form.userName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="form.passWord"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div class="btn">
      <van-button native-type="submit" round block type="primary">提交</van-button>
    </div>
  </van-form>
</template>
<script setup>
// 引入组件
import {reactive, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
// 获取上下文 (this) 对象 (setup 函数中无法直接使用 this)
const {proxy} = getCurrentInstance()
// 获取路由
const router = useRouter()
// 定义数据
const form = reactive({
  userName: '',
  passWord: ''
})
// 表达提交
const onSubmit = async () => {
  // 模拟登录
  const {data} = await proxy.$api.login(form)
  console.log(data.data)
  if(data.code === 10000) {
    localStorage.setItem("h5_token", data.data.token)
    localStorage.setItem("h5_userInfo", JSON.stringify(data.data.userInfo))
    // router.push('/home')
  }

}

</script>
<style scoped lang="less">
h1 {
  text-align: center;
}

.btn {
  margin: 16px
}
</style>
